<template>
    <el-input class="w-full" :size="size || 'default'" v-model="val"
        :maxlength="item.extra?.maxlength" :minlength="item.extra?.minlength" type="textarea"
        :show-word-limit="item?.extra?.showWordLimit" :suffix-icon="item.suffixIcon" :disabled="item.disabled"
        :readonly="item.readonly" :placeholder="item.placeholder || '请输入'"
        :autosize="item?.extra?.autoSize || { minRows: 1, maxRows: 2 }" @input="item.callbacks?.handleInput"
        @blur="item.callbacks?.handleBlur" @focus="item.callbacks?.handleFocus?.(item, $event)" @change="item.callbacks?.handleChange"
        :clearable="item?.extra?.clearable ?? true">
    </el-input>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import type { PropType } from 'vue'
import type { FormItemDto } from '@/components/form-component/type'

const props = defineProps({
    value: {
        type: String
    },
    size: {
        type: String as PropType<'large' | 'default' | 'small'>,
        default: 'default'
    },
    item: {
        type: Object as PropType<FormItemDto>,
        required: true
    }
})

const emits = defineEmits(['update:value'])

const val = ref()

watch(() => props.value, (newval) => {
    val.value = newval
}, {
    immediate: true
})

watch(val, (newval) => {
    emits('update:value', newval)
}, {
    deep: true
})

</script>
<style lang="scss" scoped></style>
